<template>
	<div ref="rankingContainer" v-resize="onSize" class="jk-ranking-container">
		<div
			v-for="(item, index) in listData"
			:key="index"
			class="jk-ranking-item"
			:style="{transition: item.hasAni ? 'all .5s' : 'none', height: `${item.height}px`, overflow: `${item.height ? '' : 'hidden'}`, padding: `${item.height ? '2px 12px' : '0px 12px'}`}"
		>
			<div class="jk-ranking-item-txt">
				<div class="jk-ranking-item-txt-left">
					<span class="jk-ranking-item-txt-left-no">NO.{{ item.noNum }}</span>
					<span class="jk-ranking-item-txt-left-label">{{ item.name }}</span>
				</div>
				<span>{{ item.val }} {{ unit || '' }}</span>
			</div>
			<div class="jk-ranking-item-progress-bar">
				<div :class="'jk-ranking-item-progress-' + type" class="jk-ranking-item-progress" :style="{width: `${item.ratio}%`}"></div>
			</div>
		</div>
	</div>
</template>

<script>
    import domResizeMixin from '../../../../../mixins/dom-resize';

    export default {
        name: 'JkRanking',
        mixins: [domResizeMixin],
        props: {
            paramData: {
                type: Array,
                default() {
                    return [];
                }
            },
            type: {
                type: String,
                default: 'primary'
            },
            valKey: {
                type: String,
                default: 'value'
            },
            labelKey: {
                type: String,
                default: 'name'
            },
            unit: {
                type: String,
                default: 'value'
            },
            workshopId: {
                type: Number,
                default: null
            }
        },
        data() {
            return {
                cpData: [],
                timerOut: {},
                interVal: {},
                listData: [],
                example: null,
                borderColor: '#c5c8ce'
            };
        },
        methods: {
            onSize() {
                this.run();
            },
            run() {
                this.$nextTick(() => {
                    // 超出容器高度时才滚动
                    if (this.$refs.rankingContainer.clientHeight < this.listData.length * 46) {
                        let item = {};
                        clearInterval(this.interVal);
                        this.interVal = setInterval(() => {
                            if (this.listData.length) {
                                this.$set(this.listData[0], 'hasAni', true);
                                this.$set(this.listData[0], 'height', 0);
                                clearTimeout(this.timerOut);
                                this.timerOut = setTimeout(() => {
                                    item = JSON.parse(JSON.stringify(this.listData))[0];
                                    item.height = 46;
                                    item.hasAni = false;
                                    this.listData.push(item);
                                    this.listData.splice(0, 1);
                                }, 1000);
                            }
                        }, 2000);
                    } else {
                        clearInterval(this.interVal);
                        if (this.listData.length) {
                            this.listData = JSON.parse(JSON.stringify(this.cpData));
                            this.$set(this.listData[0], 'hasAni', false);
                            this.$set(this.listData[0], 'height', 46);
                        }
                    }
                });
            }
        },
        mounted() {
        },
        beforeDestroy() {
            clearInterval(this.interVal);
            clearInterval(this.timerOut);
        },
        watch: {
            paramData: {
                handler(newVal) {
                    this.listData = [];
                    const arr = [...newVal];
                    const maxVal = Math.max(...arr.map(x => x[this.valKey]));
                    this.listData = newVal ? newVal.map((x, idx) => {
                        return {
                            hasAni: false,
                            height: 46,
                            ratio: parseInt((x[this.valKey] / maxVal) * 100),
                            noNum: idx + 1,
                            name: x[this.labelKey],
                            val: x[this.valKey]
                        };
                    }) : [];
                    this.cpData = JSON.parse(JSON.stringify(this.listData));
                    this.run();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<style scoped lang="scss">
    .jk-ranking-container {
        width: 100%;
        height: 100%;
        color: #c5c8ce;
        overflow: hidden;
        .jk-ranking-item {
            height: 46px;
            padding: 2px 12px;
            box-sizing: border-box;
            font-size: 13px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .jk-ranking-item-progress-bar {
                width: 100%;
                //background: rebeccapurple;
                border: solid 1px #515a6e;
                .jk-ranking-item-progress {
                    height: 6px;
                }
                .jk-ranking-item-progress-primary {
                    background: #2d8cf0;
                }
                .jk-ranking-item-progress-warning {
                    background: #ff9900;
                }
                .jk-ranking-item-progress-success {
                    background: #19be6b;
                }
                .jk-ranking-item-progress-danger {
                    background: #ed4014;
                }
            }
            .jk-ranking-item-txt {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 4px;
                .jk-ranking-item-txt-left {
                    display: flex;
                    align-items: center;
                    .jk-ranking-item-txt-left-no {
                        color: #2d8cf0;
                        margin-right: 10px;
                    }
                    .jk-ranking-item-txt-left-label {
                        color: #c5c8ce;
                    }
                }
            }
        }
    }
</style>
